<template>
  <div id="app">
    <div class="navbar-wrapper">
      <el-row type="flex" align="middle" class="navbar-row">
        <!-- 左侧Logo和平台名 -->
        <el-col :span="4" class="navbar-logo">
          <img src="/favicon.ico" alt="logo" class="logo-img" />
          <span class="platform-title">清华大学程序设计评测平台</span>
        </el-col>
        <!-- 中间菜单 -->
        <el-col :span="14">
          <el-menu mode="horizontal" background-color="#fff" text-color="#222" active-text-color="#409EFF" :default-active="$route.path" router class="main-menu">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/evaluate">评测</el-menu-item>
            <el-menu-item index="/problems">题库</el-menu-item>
            <el-menu-item index="/contests">竞赛</el-menu-item>
            <el-menu-item index="/rankings">排名</el-menu-item>
          </el-menu>
        </el-col>
        <!-- 右侧设置、语言、登录/用户名 -->
        <el-col :span="6" class="navbar-right" style="text-align:right;">
          <el-button icon="el-icon-setting" circle size="mini" style="margin-right:8px;" />
          <el-dropdown style="margin-right:8px;">
            <span class="el-dropdown-link">
              简体中文 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>简体中文</el-dropdown-item>
              <el-dropdown-item>English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <template v-if="userName">
            <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link" style="font-weight:500;cursor:pointer;">{{ userName }} <i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-button v-else type="text" style="margin-right:8px;" @click="login()">登录</el-button>
        </el-col>
      </el-row>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: ''
    }
  },
  created() {
    this.loadUser();
  },
  watch: {
    // 监听路由变化，防止登录后刷新不及时
    $route() {
      this.loadUser();
    }
  },
  methods:{
    loadUser() {
      this.userName = localStorage.getItem('user') || '';
    },
    login() {
      if (this.$route.path !== '/login') {
        this.$router.push('/login')
      }
    },
    handleUserCommand(cmd) {
      if (cmd === 'logout') {
        localStorage.removeItem('user');
        localStorage.removeItem('token');
        localStorage.setItem("isLoggedIn", false);
        this.userName = '';
      }
    }
  },
}
</script>
<style scope>
body {
  margin: 0;
  overflow-y: scroll;
}
#app {
  min-height: 100vh;
  background: #f5f7fa;
  margin-left: 30px;
  margin-right: 30px;
}
.navbar-wrapper {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 32px;
}
.navbar-row {
  height: 60px;
}
.navbar-logo {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.platform-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
.main-menu {
  border-bottom: none;
  background: transparent;
}
.navbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
}
</style>
